<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:ic="http://ivyteam.ch/jsf/component"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:pm="http://primefaces.org/mobile">
 
    <h:head>
        <title>CRUD Demonstration</title>
        <style>
        	body{
        		font-size: medium;
        	}
        </style>
        <script>
        	function showAddDetailForm(){
        		$("#addDetailFieldSet").show();
        	}
        	
        	function closeDetailForm(){
        		$("#addDetailFieldSet").hide();
        	}
        	
        	function toggleAddDetailForm(){
        		$("#addDetailFieldSet").toggle();
        	}
        </script>
    </h:head>
    <h:body>
        <h2>Welcome to student page!</h2>
        <h:form id="addBtnForm">
            <p:commandButton id="addBtn" value="Add New" oncomplete="toggleAddDetailForm()" 
            				actionListener="#{logic.resetAddDetailForm}"
            				update=":addDetailForm">
            </p:commandButton>
            <p:commandLink style="margin-right: 10px; float: right;" value="Log out" 
            				actionListener="#{logic.comeBackLoginPage}">
            </p:commandLink>
        </h:form>    
        <br/>
        <p:fieldset id="addDetailFieldSet">
	        <h:form id="addDetailForm">
	            <p:panelGrid style="width: 30%">
	            	<p:row>
	            		<p:column>
	            			<h:outputLabel value="Student Name: " for="studentNameTxt"></h:outputLabel>
	            		</p:column>
	            		<p:column>
	            			<p:inputText id="studentNameTxt" value="#{data.student.name}" required="true" 
	            						 requiredMessage="Student name is required.">
	            				<p:ajax event="keyup" update="studentNameMsg"></p:ajax>
	            			</p:inputText>
	            		</p:column>
	            	</p:row>
	            	<p:row>
	            		<p:column colspan="2">
	            			<p:message for="studentNameTxt" id="studentNameMsg"></p:message>
	            		</p:column>
	            	</p:row>
	            	<p:row>
	            		<p:column>
	            			<h:outputLabel value="School: " for="studentSchoolTxt"></h:outputLabel>
	            		</p:column>
	            		<p:column>
	            			<p:inputText id="studentSchoolTxt" value="#{data.student.school}"></p:inputText>
	            		</p:column>
	            	</p:row>
	            	<p:row>
	            		<p:column colspan="2">
	            		</p:column>
	            	</p:row>
	            	<p:row>
	            		<p:column>
	            			<h:outputLabel value="GPA: " for="studentGPATxt"></h:outputLabel>
	            		</p:column>
	            		<p:column>
	            			<p:inputText id="studentGPATxt" value="#{data.student.GPA}"></p:inputText>
	            		</p:column>
	            	</p:row>
	            	<p:row>
	            		<p:column colspan="2">
	            		</p:column>
	            	</p:row>
	            	<p:row>
	            		<p:column colspan="2">
	            			<p:commandButton id="submitBtn" value="Save"
	            							 actionListener="#{logic.save}"
	            							 update=":listStudentForm, addDetailForm"></p:commandButton>
	            			<p:commandButton id="cancelBtn" value="Cancel" onclick="closeDetailForm()"></p:commandButton>
	            		</p:column>
	            	</p:row>
	            </p:panelGrid>
	        </h:form> 
        </p:fieldset>
        <br/>
        <p:fieldset>
        	 <h:form id="listStudentForm">
        	 	<p:dataTable value="#{data.studentList}" var="student">
        	 		<p:column headerText="ID">
        	 			<h:outputText value="#{student.id}"></h:outputText>
        	 		</p:column>
        	 		<p:column headerText="Name">
        	 			<h:outputText value="#{student.name}"></h:outputText>
        	 		</p:column>
        	 		<p:column headerText="School">
        	 			<h:outputText value="#{student.school}"></h:outputText>
        	 		</p:column>
        	 		<p:column headerText="GPA">
        	 			<h:outputText value="#{student.GPA}"></h:outputText>
        	 		</p:column>
        	 		<p:column>
        	 			<center>
        	 				<p:commandButton value="edit" actionListener="#{logic.setStudent(student)}"
        	 								 onclick="showAddDetailForm()"
        	 								 update=":addDetailForm">
        	 				</p:commandButton>
        	 			</center>
        	 		</p:column>
        	 		<p:column>
        	 			<center>
        	 				<p:commandButton value="remove" actionListener="#{logic.setStudent(student)}" 
        	 								update=":deleteDialog"
        	 								oncomplete="deleteDlg.show()">
        	 				</p:commandButton>
        	 			</center>
        	 		</p:column>
        	 	</p:dataTable>
        	</h:form>
			<p:confirmDialog widgetVar="deleteDlg" id="deleteDialog"
				header="Are you sure?" width="400" modal="true" closable="false"
				severity="alert">
				<f:facet name="message">
					<h:outputText styleClass="msgWithIdPlaceHolder"
						value="Would you like to remove student with ID: #{data.student.id}"/>
				</f:facet>
				<h:panelGroup layout="block" style="text-align: right">
					<p:commandButton value="Yes"
						actionListener="#{logic.delete}"
						update=":addDetailForm,:listStudentForm"
						oncomplete="deleteDlg.hide();" />
					<p:commandButton value="No"
						oncomplete="deleteDlg.hide();" />
				</h:panelGroup>
			</p:confirmDialog>
	</p:fieldset>
       
    </h:body>
</html>